<template>
    <div>
        户型名称：<input type="text" v-model="quinfor.HouseName">
        户型结构<select v-model="quinfor.HouseType">
                <option value="">请选择</option>
                <option value="两居室">两居室</option>
                <option value="三居室">三居室</option>
                <option value="单居室">单居室</option>
            </select>
        <input type="button" value="查询"class="btn btn-primary" @click="list()">
        <input type="button" value="新增"class="btn btn-success" @click="add()">
    </div>
    <div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>所属项目</td>
                    <td>户型名称</td>
                    <td>户型结构</td>
                    <td>装修标准</td>
                    <td>建筑面积</td>
                    <td>套内面积</td>
                    <td>户型图片</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data">
                    <td>{{ item.id }}</td>
                    <td>{{ item.houseXm }}</td>
                    <td>{{ item.houseName }}</td>
                    <td>{{ item.houseType }}</td>
                    <td>{{ item.houseBz }}</td>
                    <td>{{ item.houseArea }}</td>
                    <td>{{ item.area }}</td>
                    <td><input type="button" value="查看" class="btn btn-success" @click="tu(item.id)"></td>
                    <td><input type="button" value="删除" class="btn btn-primary" @click="Del(item.id)">
                        <input type="button" value="编辑" class="btn btn-danger" @click="upd(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let quinfor: any = reactive({
    HouseName: '',
    HouseType: ''

})
let data: any = ref([])

onMounted(() => {
    list();
})
const list = () => {
    axios({
        url: '/api/House/HouseShow',
        method: 'get',
        params: quinfor
    })
        .then(res => {
            data.value = res.data

        })
}
const Del = (id: any) => {
    if (confirm("确定要删除吗")) {

        axios({
            url: '/api/House/HouseDel',
            method: 'delete',
            params: {
                id: id
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert("删除成功");
                    list();
                    return;
                }
                else {
                    alert("删除失败")
                    return;
                }
            })

    }

}
const upd = (id: any) => {
    router.push({
        path: '/houseUpd',
        query: {
            id: id
        }
    })
}
const add = () => {
    router.push({
        path: '/houseAdd',
        
    })
}
const tu = (id: any) => {
    router.push({
        path: '/housePhoto',
        query: {
            id: id
        }
    })
}

</script>

<style scoped>
input{margin: 0 10px;}
</style>